<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <ul id="example-1">
        <li v-for="n in evenNumbers">{{ n }}</li>
    </ul>

    <ul id="example-2">
        <li v-for="n in even(numbers)">{{ n }}</li>
    </ul>

</body>

<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            numbers: [1, 2, 3, 4, 5]
        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    });
    var example2 = new Vue({
        el: '#example-2',
        data: {
            numbers: [1, 2, 3, 4, 5]
        },
        methods: {
            even: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    })
</script>

</html>